import type { AdjustElementStyleConfig } from '../../lib/abstract'
import type { EDIT_TYPE_CONFIG, STYLE_PROPERTIES, STYLE_PROPERTY_GROUPS } from './constants'

/**
 * 样式编辑器组件属性
 */
export interface StyleEditorProps {
  id: string
  label: string
  targetSelector: string
  onStyleChange: (selector: string, styles: Record<string, string>) => void
  onGenerated: (styles: AdjustElementStyleConfig[]) => void
}

/**
 * 样式分组接口
 */
export interface IStyleGroup {
  label: string
  icon: string
}

/**
 * 样式属性接口
 */
export interface IStyleProperties {
  label: string
  category: StyleGroup
  component?: StyleComponentConfig
}
/**
 * 样式属性配置类型
 */
export type StyleProperty = keyof typeof STYLE_PROPERTIES
export type StyleGroup = keyof typeof STYLE_PROPERTY_GROUPS

/**
 * 样式属性项接口
 */
export interface StylePropertyItem {
  id: StyleProperty
  label: string
}

/**
 * 元素项接口
 */
export interface ElementItem {
  id: string
  label: string
}
interface ElementGroup {
  name: string
  items: ElementItem[]
}
export type ElementGroupType = Record<string, ElementGroup>

export type selectedType = {
  group: string
  groupName: string
  id: string
  name: string
} | null

export type StyleComponentType
  = | 'RangeSlider'
    | 'ColorPicker'
    | 'TextInput'
    | 'Select'
    | 'ToggleSwitch'

interface StyleComponentConfig {
  type: StyleComponentType
  count?: number // 需要的组件数量
  props?: Record<string, any>[] // 每个组件的独立配置
  layout?: 'horizontal' | 'vertical' | 'grid' // 布局方式（horizontal 水平、vertical 垂直、grid 网格）
  gap?: number // 组件间距
  extraStyles?: string // 额外样式
}

/**
 * 样式编辑器步骤状态类型
 */
export type EditType = typeof EDIT_TYPE_CONFIG[keyof typeof EDIT_TYPE_CONFIG]
export type DataChangeType = 'add' | 'clear' | 'quick' | 'cache' | 'delete'

/**
 * 专注模式元素样式配置
 */
interface FocusModeElementStyle {
  /**
   * 样式属性名 → [专注模式值, 正常模式值]
   * @example { 'margin-bottom': ['100px', ''] }
   */
  [property: string]: [string, string]
}

/**
 * 单个元素配置项
 */
interface FocusModeElementConfig {
  /** CSS选择器 */
  selector: string
  /**
   * 操作类型
   * - toggle: 切换显示/隐藏
   * - display: 控制display属性
   * - style: 通过style对象控制（默认）
   */
  action?: 'toggle' | 'display' | 'style'
  /** display属性的值 [专注模式值, 正常模式值] */
  value?: [string, string]
  /** 需要控制的样式集合 */
  styles?: FocusModeElementStyle
}

/**
 * 按钮状态配置
 */
interface FocusModeButtonState {
  /** 图标字符或HTML */
  icon: string
  /** 按钮文字 */
  text: string
}

/**
 * 专注模式全局配置
 */
export interface FocusModeConfig {
  /** 需要控制的元素集合 */
  elements: {
    [key: string]: FocusModeElementConfig
  }
  /** 按钮状态配置 */
  buttonStates: {
    active: FocusModeButtonState
    inactive: FocusModeButtonState
  }
}

/**
 * 我的收藏组件属性
 */
export interface MyFavoritesProps {
  id?: string
  onSelect?: (item: string) => void
  onRemove?: (item: string) => void
}

/**
 * 删除行事件的数据负载
 */
export interface DeleteLinePayload {
  /** 样式属性名 */
  property: string
  /** 样式唯一ID (MD5哈希) */
  id: string
  /** 原始行号 */
  lineNum: number
  /** 是否影响其他关联行 */
  affectsRelatedLines?: boolean
}
